<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
      <script src="../js/vue.js"></script>
        <style>
          div span{
              background-color: #f00;
              color: #fff;
              padding: 2px 5px;
              font-size: 12px;
              border-radius: 5px;
              margin-left: 10px;
          }
        </style>
    </head>
    <body>
        <div>
            商品名:{{goods.name}}<br>
            价格:{{goods.price}}<br>
            标签: <span>{{goods.tags.split(" ")[0]}}</span>
            <span>{{goods.tags.split(" ")[1]}}</span>
            <span>{{goods.tags.split(" ")[2]}}</span>
        </div>
        
        <script>
             new Vue({
                 el:"div",
                 data:{
                     goods:{
                         name:"华为手机",
                         price:2999,
                         tags:"新上市 高配 时尚"
                     }
                 }
             });
        </script>
    </body>
</html>
